
import { Space, Table, Input, Image, Checkbox, Tag } from 'antd'
import SubTitle from '@/views/components/SubTitle'
import Typography from '@/views/components/Typography'
import Style from './index.module.less'
import { fieldMap } from '../../fieldMap'
import { useScanRegistrationStore } from '../../store'

const afterTypeMap = {
  0: '退货退款',
  1: '已发货仅退款',
  2: '未发货仅退款',
  3: '换货',
  6: '价保',
  7: '补寄',
  9: '订单退款'
}

const LabelValue = (props) => {
  const { data, value, dataIndex } = props
  return (
    <span>{dataIndex}：{value || (data ? data[fieldMap[dataIndex]] : '')}</span>
  )
}

const GoodsInfoGroup = (props) => {
  const { data } = props
  return (
    <div style={{ lineHeight: 3}}>
      <Typography as="s5" style={{fontWeight: 600}}>{data[fieldMap['系统商品名称']]}</Typography><br />
      <Typography as="s4" ><LabelValue dataIndex="商品编码" value={data[fieldMap['系统商品编码']]} /></Typography><br />
      <Typography as="s4" ><LabelValue dataIndex="款式编码" value={data[fieldMap['系统款式编码']]} /></Typography><br />
      <Typography as="s4">{data[fieldMap['系统颜色规格']]}</Typography>
    </div>
  )
}
const GoodsUniqueCode = (props) => {
  const { data=[], item: goodsItem } = props
  const { updateState, orderList } = useScanRegistrationStore()
  return (
    <>
      {
        data.map((item, index) => {
          return (
            <div key={index} className={`uniqueCode ${item.status === 1 ? 'green' : 'red'}`}>
              <Checkbox checked={item.selected} onChange={() => {
                item.selected = !item.selected
                goodsItem[fieldMap['次品数量']] = data.filter(item => item.selected && item.status === 2).length
                updateState({
                  orderList: JSON.parse(JSON.stringify(orderList))
                })
              }}>{item.value}</Checkbox>
              <div className='tableTag' onClick={() => {
                item.status = item.status === 1 ? 2 : 1
                goodsItem[fieldMap['次品数量']] = data.filter(item => item.selected && item.status === 2).length
                updateState({
                  orderList: JSON.parse(JSON.stringify(orderList))
                })
              }}>次品</div>
            </div>
          )
        })
      }
    </>
  )
}

const GoodsTable = (props) => {
  const { data } = props
  const { orderList, updateState, currentSelectGoods, isConfirmReceivingGoods } = useScanRegistrationStore()

  const columns = [
    {
      title: '序号',
      dataIndex: 'afterSaleGoodsId',
      width: 80,
      render(record, item, index) {
        return index + 1
      }
    },
    {
      title: '商品图片',
      dataIndex: fieldMap['系统商品图片'],
      width: 112,
      render(text, record) {
        return  <>
                  <Image width={88} src={text} style={{ borderRadius: 6, marginBottom: '16px' }}/>
                  <div>待审订单数：<span className="common-color9">{record.checkGoodsNum}</span></div>
                  <div>待退商品数：<span className="common-color9">{record.refundGoodsNum}</span></div>
                </> ;
      },
    },
    {
      title: '商品信息',
      dataIndex: fieldMap['系统商品名称'],
      width: 360,
      render (record, item) {
        return <GoodsInfoGroup data={item} />
      }
    },
    {
      title: '拆包数量',
      dataIndex: fieldMap['拆包数量'],
      width: 150,
      render (text, item) {
        return <Input type="number" min={0} disabled={isConfirmReceivingGoods} className={Style.tableInput} defaultValue={text} placeholder="请输入数量" onInput={(e) => {
          item[fieldMap['拆包数量']] = e.target.value
          
          updateState({
            orderList
          })
        }} />
      }
    },
    {
      title: '次品数量',
      dataIndex: fieldMap['次品数量'],
      width: 100
    },
    {
      title: '申请退货数量',
      dataIndex: fieldMap['申请退货数量'],
      width: 120
    },
    {
      title: '商品唯一码/商品编码',
      dataIndex: fieldMap['商品唯一码'],
      width: 250,
      render (text, record) {
        return <GoodsUniqueCode data={text} item={record} />
      }
    },
    {
      title: '商品单价',
      dataIndex: fieldMap['系统商品单价'],
      width: 90,
      render (text) {
        if (text) {
          return '¥' + text
        }
        return ''
      }
    },
    {
      title: '退款金额',
      dataIndex: fieldMap['退款金额'],
      width: 90,
      render (text, record) {
        const num = record[fieldMap['拆包数量']]
        const price = record[fieldMap['系统商品单价']]
        if (num && price) {
          return `¥${(num * price).toFixed(2)}`
        }
        
        return ''
      }
    },
    {
      title: '供应商',
      dataIndex: fieldMap['供应商'],
      width: 150
    },
  ];

  const rowSelection = {
    selectedRowKeys: (currentSelectGoods[data[fieldMap['售后单号']]] || []).map(item => item[fieldMap['售后商品id']]),
    onChange: (selectedRowKeys, selectedRows) => {
      updateState({
        currentSelectGoods: {
          ...currentSelectGoods,
          [data[fieldMap['售后单号']]]: selectedRows
        }
      })
    }
  };

  const scrollWidth = columns.reduce((total, item) => {
    return total += item.width
  }, 0)

  return (
    <Table
      style={{ marginTop: 16 }}
      rowKey={fieldMap['售后商品id']}
      rowSelection={{
        type: 'checkbox',
        ...rowSelection,
      }}
      pagination={false}
      scroll={{ x: scrollWidth }}
      bordered dataSource={data[fieldMap['售后商品列表']]} columns={columns}
    />
  )
}

const OrderItem = (props) => {
  const { data, index } = props
  return (
    <div style={{ marginTop: 16}}>
      <SubTitle symbol as="s3" title={`售后订单${index + 1}`} />
      <Space style={{marginTop: 12}} size={32}>
        <LabelValue dataIndex="售后单号" data={data}/>
        <LabelValue dataIndex="内部系统订单号" data={data}/>
        <LabelValue dataIndex="售后类型" value={afterTypeMap[data[fieldMap['售后类型']]]}/>
        <LabelValue dataIndex="店铺" value={data[fieldMap['店铺名称']]}/>
        <LabelValue dataIndex="退货备注" data={data}/>
      </Space>
      <div style={{ width: `calc(100vw - 528px)` }}>
        <GoodsTable data={data} />
      </div>

    </div>
  )
}

export default OrderItem
